import {KeywordModel} from "../../models/keyword.js";
import {BookModel} from "../../models/book.js";
import {paginationBev} from "../behaviors/pagination.js";

const keywordModel = new KeywordModel();
const bookModel = new BookModel();

Component({
  /**
   * 组件所要使用的行为
   */
  behaviors:[paginationBev],

  /**
   * 组件的属性列表
   */
  properties: {
    //通过page传递more来告知组件是否下滑到底部，如果下滑到底部就会改变more值，一旦more值改变就会触发observer函数
    more: {
      type: String,
      observer: 'loadMore'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    historyWords:[],
    hotWords:[],
    searching:false,
    q:'',//query搜索内容
    loading:false,//锁变量
    loadingCenter:false
  },

  /**
   * 组件初始化函数
   */
  attached() {
    //hotWords是promise对象，是从服务器获取的；historyWords是缓存，和服务器没有关系
    const historyWords = keywordModel.getHistory();
    const hotWords = keywordModel.getHot();
    this.setData({
      historyWords:historyWords
    });
    hotWords.then(res=>{
      this.setData({hotWords:res.hot});
    });
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     *
     * @param event
     * @private
     */
    loadMore(event){
      //如果搜索内容q没有值就不要加载更多
      if(!this.data.q){
        return;
      }
      if(this.isLocked()){return;}

      if(this.hasMore()){//阻止发送无效的请求
        this.locked();
        bookModel.search(this.getCurrentStart(),this.data.q).then(res=>{
          // 要将原有书籍和之后下滑到底部获取新的书籍res.books整合在一起
          this.setMoreData(res.books);
          this.unlocked();
        },(error)=>{
          //请求失败也要解锁，避免产生死锁
          this.unlocked();
        });
      }
    },

    /**
     * 点击取消搜索，向page页面传递事件，book.wxml用bind:cancel监听
     * @param event
     */
    onCancel(event){
      this.triggerEvent('cancel',{},{});
      this.initialize();
    },

    /**
     * 点击搜索框里的 × 按钮，测试点击无效是因为x太小，点击不到，可以更换机型为ipad测试
     * @param event
     */
    onDelete(event){
      this._closeResult();
      this.initialize();
    },

    /**
     * 输入框输入完成之后回车，将输入框的内容放入缓存，成为历史搜索
     * 如果搜索到数据，就将书籍数据回显到页面
     * @param event
     */
    onConfirm(event){
      this._showResult();
      this._showLoadingCenter();
      const q = event.detail.value || event.detail.text;
      this.setData({q:q});
      bookModel.search(0,q).then(res=>{
        this.setMoreData(res.books);
        this.setTotal(res.total);//设置总记录条数
        this._hideLoadingCenter();
        keywordModel.addToHistory(q);
      })
    },

    /**
     * 显示搜索内容
     * @private
     */
    _showResult(){
      this.setData({
        searching:true
      });
    },

    /**
     * 去除搜索内容
     * @private
     */
    _closeResult(){
      this.setData({
        searching:false,
        q:''
      });
    },

    /**
     * 显示页面中间的加载图标
     * @private
     */
    _showLoadingCenter(){
      this.setData({
        loadingCenter:true
      });
    },

    /**
     * 去除页面中间的加载图标
     */
    _hideLoadingCenter(){
      this.setData({
        loadingCenter:false
      })
    }
  }
})
